<template>
  <div>
    <wy-banner></wy-banner>
    <div class="container">
      <div class="clear">
        <ul class="select-brand clear">
          <li v-for="(item,index) in brandList" :class="{active:brandIndex==item.No}" @click="brandChange(item,index)"
            class="text-center" :key="item.No">
            <p>{{item.brandName}}维修</p>
            <p class="brand-underline"></p>
          </li>
        </ul>
      </div>

      <div class="selectFault clear">

        <div>
          <p class="d_jump"></p>
          <p class="selectFault-title">您的设备型号是？</p>
          <item-cell :data="modelList" labelField="modelName" valueField="No" :activeIndex="modelNo"
            @change="modelChange"></item-cell>
        </div>
        <p class="d_jump"></p>
        <div v-if="selected.model!=null">
          <p class="selectFault-title">您的设备颜色是？</p>
          <item-cell :data="colorList" labelField="colorName" valueField="No" :activeIndex="colorIndex"
            @change="colorChange"></item-cell>
        </div>
        <p class="d_jump"></p>
        <div v-if="selected.color!=null">
          <p class="selectFault-title">您的设备故障是？</p>
          <item-cell :data="faltList" labelField="mainTypeName" valueField="No" :activeIndex="faltIndex" :onOff="true"
            imgField="categoryAddress" @change="faltChange"></item-cell>
        </div>
        <p class="d_jump"></p>
        <div v-if="selected.falt!=null">
          <p class="selectFault-title">您的设备故障详情是？</p>
          <item-cell :data="faltDetailList" labelField="subTypeName" valueField="No" :activeIndex="faltDetailIndex"
            @change="faltDetailChange"></item-cell>
        </div>
        <!--价格-->
        <p class="d_jump"></p>
        <div class="text-center surePrice" v-if="selected.faltDetail!=null">
          <p class="estimate">
            预估报价：
            <span>
              ¥&nbsp;{{totalPrice}}
            </span>
          </p>
          <p class="explain">(价格为预估，以实际检测为准)</p>
          <el-button type="primary" class="createOrederBtn" @click="placeOrder">确认故障</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtilcopy'
  import WyBanner from './banner.vue'
  import ItemCell from './itemcell.vue'

  export default {
    name: 'selectfault',
    components: {
      WyBanner,
      ItemCell
    },
    data() {
      return {
        //..index代表选中的参数的id
        brandIndex: null,
        modelNo: null,
        colorIndex: null,
        faltIndex: null,
        faltDetailIndex: null,
        //..List表示数据数据
        brandList: [],
        colorList: [],
        modelList: [],
        faltList: [],
        faltDetailList: [],
        solutions: [],
        //被选中的值
        selected: {
          brand: null,
          model: null,
          color: null,
          falt: null,
          faltDetail: null
        },
        //总价
        totalPrice: null
      }
    },
    methods: {
      //品牌切换
      brandChange(item, index) {
        this.brandIndex = item.No;
        this.selected.brand = {
          id: item.No,
          name: item.brandName
        };
        //清空选择的型号的选中样式   以下代码类似
        this.modelNo = 0;
        this.selected.model = null;
        this.selected.color = null;
        this.selected.falt = null;
        this.selected.faltDetail = null;
        let models = JSON.parse(window.localStorage.getItem('model-list'));
        let modellsit = models.filter((it) => {
          if (it.No == item.No) {
            return item;
          }
        });

        this.modelList = modellsit[0].children;
        this.jump(0);

      },
      //型号切换
      modelChange(item) {
        this.selected.model = {
          No: item.No,
          name: item.modelName
        };
        this.modelNo = item.No;
        this.colorIndex = 0;
        let colors = JSON.parse(window.localStorage.getItem('model-color-list'));
        this.colorList = colors.filter((it) => {
          if (it.MNo == item.No) {
            return it;
          }
        })
        this.faltList = JSON.parse(window.localStorage.getItem('model-flates-list'));
        this.selected.color = null;
        this.selected.falt = null;
        this.selected.faltDetail = null;
        this.jump(1);
      },
      //颜色切换
      colorChange(item) {
        this.selected.color = {
          id: item.No,
          name: item.colorName
        };
        this.faltIndex = 0;
        this.colorIndex = item.No;
        this.selected.falt = null;
        this.selected.faltDetail = null;
        this.jump(2);
      },
      //故障选择
      faltChange(item) {
        this.selected.falt = {
          id: item.No,
          name: item.mainTypeName
        };
        this.faltIndex = item.No;
        this.faltDetailIndex = 0;
        this.selected.faltDetail = null;
        this.jump(3);
        this.faltDetailList = JSON.parse(window.localStorage.getItem('flate-Detail-list'));
      },
      //故障详情
      faltDetailChange(item) {
        this.selected.faltDetail = {
          id: item.No,
          name: item.subTypeName,
          price: item.price
        };
        this.faltDetailIndex = item.No;
        this.jump(4);
        this.totalPrice = item.price;
      },
      //立即下单
      placeOrder() {
        let detailArray = [];
        detailArray.push(this.selected.faltDetail);
        window.sessionStorage.setItem("deviceInfo", JSON.stringify({
          solutions: this.solutions,
          brand: this.selected.brand,
          model: this.selected.model,
          color: this.selected.color,
          falt: this.selected.falt,
          faltDetail: detailArray
        }));
        this.$router.push({
          path: '/web/confirm'
        });
      },
      jump(index) { // 用 class="d_jump" 添加锚点
        let jump = document.querySelectorAll('.d_jump');
        let total = jump[index].offsetTop - 90;
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50;
        if (total > distance) {
          smoothDown()
        }

        function smoothDown() {
          if (distance < total) {
            distance += step
            // Firefox
            document.documentElement.scrollTop = distance
            // Chrome
            document.body.scrollTop = distance
            setTimeout(smoothDown, 10)
          } else {
            document.documentElement.scrollTop = total
            document.body.scrollTop = total
          }
        }
      },
      datajudge() {
        let selectedData = JSON.parse(window.sessionStorage.getItem("selectedData"));
        if (selectedData === null) {
          this.brandIndex = '1634803770383';
          this.selected.brand = {
            id: '1634803770383',
            name: '苹果'
          };
        } else {
          this.brandIndex = selectedData.brand.No;
          this.selected.brand = selectedData.brand;
          this.selected.model = selectedData.model;
          for (let i = 0; i < this.brandList.length; i++) {
            if (this.brandIndex === this.brandList[i].id) {
              this.modelList = this.brandList[i].children;
            }
          }
          if (selectedData.model !== null) {
            this.modelNo = selectedData.model.id;
            for (let i = 0; i < this.modelList.length; i++) {
              if (selectedData.model.id === this.modelList[i].id) {
                this.colorList = this.modelList[i].children;
                this.faltList = this.modelList[i].failures;
              }
            }
          }
        }
      }
    },
    mounted: function () {
      document.getElementsByTagName('body')[0].scrollTop = 0;
      //获取到缓存中的数据  如果缓存有数据页面直接展示缓存数据，如果没有则使用默认的苹果数据
      let AllData = JSON.parse(window.sessionStorage.getItem("AllData"));
      this.brandList = JSON.parse(window.localStorage.getItem('brandList'));
      let modellist = JSON.parse(window.localStorage.getItem('model-list'));
      let selectedData = JSON.parse(window.sessionStorage.getItem("selectedData"));
      let models = modellist.filter((item) => {
        if (item.No == selectedData.model.id) {
          return item;
        }
      });
      this.datajudge();
      this.modelList = models;

    }
  }

</script>

<style scoped="scoped">
  .select-brand {
    padding: 50px 0 40px 0;
  }

  .select-brand li {
    float: left;
    padding: 0 50px;
    color: #535353;
    border-right: 1px solid #535353;
    font-size: 18px;
  }

  .brand-underline {
    width: 24px;
    height: 2px;
    margin: 5px auto 0;
  }

  .select-brand li:last-child {
    border-right: none;
  }

  .select-brand li.active {
    color: #3c9ad4;
  }

  .select-brand li.active .brand-underline {
    background-color: #3c9ad4;
  }

  .selectFault {
    padding: 0 15px 90px;
    border: 1px solid #e3e3e3;
    margin-bottom: 150px;
  }

  .selectFault-title {
    margin-top: 40px;
    font-size: 22px;
    color: #2392d1;
  }

  .surePrice {
    margin-top: 80px;
  }

  .estimate {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .estimate span {
    font-size: 28px;
    color: #ed8045;
  }

  .explain {
    color: #a0a0a0;
  }

  .createOrederBtn {
    width: 380px;
    height: 90px;
    font-size: 32px;
    letter-spacing: 10px;
    margin-top: 10px;
    background-color: #0fafeb;
    border-radius: 10px;
    box-shadow: 0px 5px 2px #079ad1;
  }

</style>
